<template>
	<view>
		<view class="wrap">
			<u-tabs :list="tabList" :is-scroll="false" :current="tabCurrent" @change="tabChange"></u-tabs>
			<view class="u-border-left u-border-top inner-wrap">
				<view @tap="typeChange(item.name)" class="u-icon-item u-border-bottom u-border-right" 
				v-for="(item, index) in myTypeList" :key="index">
					<u-icon class="icon-select" :name="item.icon" custom-prefix="custom-icon" v-show="item.name === typeName"></u-icon>
					<u-icon class="icon-unselect" :name="item.icon" custom-prefix="custom-icon" v-show="item.name !== typeName" ></u-icon>
					<text class="u-icon-name-unselected" v-show="item.name === typeName">{{item.name}}</text>
					<text class="u-icon-name-selected" v-show="item.name !== typeName">{{item.name}}</text>
				</view>
			</view>
			<u-form label-width="150" label-position="left" label-align="center">
				<u-form-item label="金额">
					<u-input v-model="money"  placeholder="请输入金额" type="number"/>
				</u-form-item>
				<u-form-item label="备注">
					<u-input v-model="remark"  placeholder="请输入备注"/>
				</u-form-item>
				<u-form-item label="时间">
					<u-input v-model="time" @tap="show = true" disabled/>
					<u-picker v-model="show" mode="time" :default-time="time" @confirm="confirmTime"></u-picker>
					<!-- <u-button @click="show = true">打开</u-button> -->
				</u-form-item>
			</u-form>
			<u-gap height="30"></u-gap>
			<u-row gutter="16">
				<!-- <u-col span="1">
					<span>&nbsp;</span>
				</u-col> -->
				<u-col span="2">
					<u-button type="info" size="medium" @click="canel">返回</u-button>
				</u-col>
				<u-col span="2">
					<span>&nbsp;</span>
				</u-col>
				<u-col span="2">
					<u-button type="error" size="medium" @click="openDel">删除</u-button>
				</u-col>
				<u-col span="2">
					<span>&nbsp;</span>
				</u-col>
				<u-col span="2">
					<u-button type="primary" size="medium" @click="save">保存</u-button>
				</u-col>
				<u-col span="1">
					<span>&nbsp;</span>
				</u-col>
			</u-row>
			<view>
				<u-toast ref="uToast" />
			</view>
			
		</view>
		<view>
			<u-popup v-model="showPopup" mode="bottom">
				<u-gap height="30"></u-gap>
				<u-alert-tips show-icon type="warning" title="警告" description="您确定要删除本条数据吗？"></u-alert-tips>
				<u-row gutter="16" >
					<u-col span="2">
						<span>&nbsp;</span>
					</u-col>
					<u-col span="3">
						<u-button type="error" size="medium" @click="del">删除</u-button>
					</u-col>
					<u-col span="2">
						<span>&nbsp;</span>
					</u-col>
					<u-col span="3">
						<u-button type="info" size="medium" @click="showPopup = false">取消</u-button>
					</u-col>
					<u-col span="2">
						<span>&nbsp;</span>
					</u-col>
					<u-gap height="180"></u-gap>
				</u-row>
			</u-popup>
		</view>

		<!-- 自定义tabbar -->
		<!-- <xm-tabbar></xm-tabbar> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList:[{name:"支出"},{name:"收入"}],
				id: "",
				tabCurrent: 0,
				myTypeList: [],
				typeName: "",
				typeCode: "",
				typeIcon: "",
				money: "",
				remark: "",
				time: this.$u.timeFormat(new Date, "yyyy-mm-dd"),
				show: false,
				showKeyBoard: false,
				showPopup: false,
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.time = option.time ? option.time.substring(0, 10) : this.$u.timeFormat(new Date, "yyyy-mm-dd");
			this.tabCurrent = parseInt(option.type);
			this.typeName = option.typeName;
			this.typeCode = option.typeCode;
			this.typeIcon = option.typeIcon;
			this.money = option.money;
			this.remark = option.remark;
			this.status = option.status;
			this.myTypeList = this.getTypeList();
		},
		methods: {
			// 重置数据
			dataReset(){
				this.tabCurrent = 0;
				this.myTypeList = this.getTypeList();
				this.typeName = "";
				this.money = "";
				this.remark = "";
			},
			// 切换选项卡
			tabChange(index) {
				this.tabCurrent = index;
				this.myTypeList = this.getTypeList();
			},
			// 选择收支类型
			typeChange(name) {
				this.typeName = name;
				this.myTypeList.forEach(item => {
					if(item.name === name){
						this.typeCode = item.code;
						this.typeIcon = item.icon;
					}
				})
			},
			// 显示提示框
			openDel(){
				this.showPopup = true;
			},
			// 删除记录
			del(){
				this.status = -1;
				this.save();
			},
			// 保存记录
			save(){
				if(this.typeName === null || this.typeName === ""){
					this.$refs.uToast.show({title: '请选择类型',type: 'error'});
					return;
				}
				if(this.money === null || this.money === ""){
					this.$refs.uToast.show({title: '请输入金额',type: 'error'});
					return;
				}
				var record = {
					"id": this.id,
					"type" : this.tabCurrent, 
					"typeCode" : this.typeCode,
					"typeIcon" : this.typeIcon,
					"typeName" : this.typeName,
					"money" :  parseFloat(this.money).toFixed(2), 
					"remark" : this.remark, 
					"time" : this.time + " 00:00:00",
					"status" : this.status,
					}
				this.recordList.forEach(item => {
					if(item.id === this.id){
						item.type = this.tabCurrent;
						item.typeCode = this.typeCode;
						item.money = parseFloat(this.money).toFixed(2);
						item.remark = this.remark;
						item.time = this.time + " 00:00:00";
						item.status = parseInt(this.status);
					}
				})
				this.$u.vuex('recordList', this.recordList);
				this.$refs.uToast.show({title: '记录完成',type: 'success',url: '/pages/detail/list', isTab : true, duration: 400});
			},
			// 取消返回
			canel(){
				// this.dataReset();
				this.$u.route({
					type : "switchTab",
					url: '/pages/detail/list'
				})
			},
			// 获取类型列表
			getTypeList(){
				var list = [];
				this.typeList.forEach(item => {
					if(item.type === this.tabCurrent){
						list.push(item)
					}
				})
				return list;
			},
			// 修改日期
			confirmTime(val){
				this.time = this.$u.timeFormat(val.timestamp, "yyyy-mm-dd");
			}
		}

	}
</script>

<style>
.inner-wrap {
		display: flex;
		flex-wrap: wrap;
	}
	.u-icon-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 190rpx;
		flex: 0 0 25%;
		justify-content: center;
		overflow: hidden;
	}
	
	.u-icon-name-selected {
		color: $u-tips-color;
		word-wrap: break-word;
		word-break:break-all;
		margin-top: 16rpx;
		font-size: 26rpx;
		padding: 0 14rpx;
		// 给定高度是为了图标名超出一行时，进行换行能有更好的效果
		height: 26rpx;
	}
	.u-icon-name-unselected {
		color: #2979FF;
		word-wrap: break-word;
		word-break:break-all;
		margin-top: 16rpx;
		font-size: 35rpx;
		padding: 0 14rpx;
		// 给定高度是为了图标名超出一行时，进行换行能有更好的效果
		height: 26rpx;
	}
	.icon-select{
		color: #2979FF;
		font-size: 80rpx;
	}
	.icon-unselect{
		color: #909399;
		font-size: 60rpx;
		
	}
	
</style>